<template>
  <div
    class="flex justify-center items-center"
    :style="isMobile ? 'width:100%' : 'max-width:375px'"
  >
    <van-tabbar
      v-model="active"
      :fixed="fixed"
      safe-area-inset-bottom
      :style="isMobile ? 'width:100%' : 'min-width:375px'"
    >
      <van-tabbar-item
        v-for="(item, index) in tabbarList"
        @click="tabbarItem(index)"
      >
        <div class="flex flex-col justify-center items-center h-50px w-90px">
          <van-image
            width="20px"
            height="20px"
            fit="cover"
            :src="item.isActive ? item.activeImage : item.image"
          />

          <div class="text-14px mt-5px">{{ item.name }}</div>
        </div>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
import { watchEffect } from "vue";
import getImageurl from "@/util/getImageurl";
const props = defineProps({
  isMobile: { type: Boolean, default: false },
});
const router = useRouter();
const route = useRoute();
const active = ref(route.meta.active);
const tabbarList = ref([
  {
    image: getImageurl("home/1.png"),
    activeImage: getImageurl("home/1-1.png"),
    isActive: false,
    name: "首页",
  },
  {
    image: getImageurl("home/2.png"),
    activeImage: getImageurl("home/2-2.png"),
    isActive: false,
    name: "全部记录",
  },
  {
    image: getImageurl("home/3.png"),
    activeImage: getImageurl("home/3-3.png"),
    isActive: false,
    name: "记账中心",
  },
  {
    image: getImageurl("home/4.png"),
    activeImage: getImageurl("home/4-4.png"),
    isActive: false,
    name: "个人中心",
  },
]);
const fixed = ref(props.isMobile ? true : false);
const tabbarItem = (i) => {
  active.value = i;
  // 0是首页 1是全部记录 2是记账中心 3是个人中心
  switch (i) {
    case 0:
      router.push("/index/home");
      break;
    case 1:
      router.push("/index/order/order");
      break;
    case 2:
      router.push("/index/distribution/distribution");
      break;
    case 3:
      router.push("/index/personal/personal");
      break;
  }
};
const init = () => {
  tabbarList.value.forEach((item, index) => {
    if (index == route.meta.active) {
      tabbarList.value[index].isActive = true;
    } else {
      tabbarList.value[index].isActive = false;
    }
  });
};

watchEffect(() => {
  active.value = route.meta.active;
  init();
});
</script>
<style scoped lang="scss"></style>
